<template>
    <div class="sendNote">

        <div class="header">
            <span>短信下发</span>
            <span style="cursor: pointer;" @click="() => emit('closeWindow')">X</span>
        </div>

        <div style="margin-top: 20px;">填写文字信息</div>

        <div class="content">

            <el-checkbox-group v-model="checkValue">
                <el-checkbox v-for="item in checkItemList " :key="item.label" :label="item.label"
                    :value="item.value"></el-checkbox>
            </el-checkbox-group>

            <span @click="dialogFlag = true">选择模板</span>

        </div>



        <div class="textArea">
            <textarea></textarea>
        </div>
        <div style="text-align: center; margin-top: 40px;">
            <el-button type="primary">保存</el-button>
        </div>

        <el-dialog title="提示" :visible.sync="true" width="200"    >
            <span>这是一段信息</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script setup >
const emit = defineEmits(['closeWindow'])

const checkValue = ref()
const checkItemList = ref([
    { label: '紧急', value: '0' },
    { label: '终端显示器显示', value: '1' },
    { label: '终端TTS播读', value: '2' },
    { label: '广告屏显示', value: '3' },
])

const dialogFlag = ref(false)
const handleClose = (done) => {
    // this.$confirm('确认关闭？')
    //     .then(_ => {
    //         done();
    //     })
    //     .catch(_ => { });
}

</script>

<style scoped lang="scss">
.sendNote {
    width: 800px;

    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 10px;
        border-bottom: 1px solid #9BAFD6;

        >span {
            font-size: 20px;
            font-weight: 600;
        }
    }

    .content {
        margin: 30px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;

        >span {
            font-size: 14px;
            margin-right: 150px;
            cursor: pointer;

            &:hover {
                color: #fff;
            }
        }
    }

    .textArea {
        width: 100%;

        >textarea {
            width: 80%;
            height: 160px;
            outline: none;
            background-color: #091940;
            color: #fff;
        }
    }

    .el-dialog {
        z-index: 9999;
    }

}
</style>